<template>
	<view class="yg-cat">
		<!-- 搜索中心开始 -->
		<!-- a.3 使用 search 组件 -->
		<Search></Search>
		<!-- 搜索中心结束 -->
		<!-- 分类内容的开始 -->
		<view class="yg-cat-content">
			<scroll-view class="cat-content-left" scroll-y="true">
				<view :class="['content-left-item',{'active':select_index===index}]" @click="changeIndex(index)"
					v-for="(item,index) in categories" :key="item.cat_id">{{item.cat_name}}</view>
			</scroll-view>
			<scroll-view :scroll-top="scrollTop" class="cat-content-right" scroll-y="true" @scrolltolower="handleLower">
				<view class="content-right-item" v-for="item in categories[select_index].children" :key="item.cat_id">
					<view class="right-item-head">/ {{item.cat_name}} /</view>
					<view class="right-item-body" >
						<navigator :url="'/pages/goods_list/goods_list?cat_id='+item2.cat_id" class="item-body-i" v-for="item2 in item.children" :key="item2.cat_id">
							<image :src="item2.cat_icon"></image>
							<view class="text">{{item2.cat_name}}</view>
						</navigator>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 分类内容的结束 -->
	</view>
</template>

<script>
	/* a.1. 引入search 组件 */
	import Search from "@/components/Search.vue"

	export default {
		// a.2 注册一个局部组件
		components: {
			Search
		},
		data() {
			return {
				// b.3 定义一个分类的数据
				categories: [],
				// 定义一个选中的下标
				select_index: 0,
				// 定义滚动条初始值
				scrollTop:0
			}
		},
		async onShow() {
			// 请求商品数据
			let res = await this.$request({
				url: "categories"
			})
			console.log(res)
			this.categories = res.message
		},
		methods: {
			// 一级分类点击事件
			changeIndex(index) {
				this.select_index = index
				// f.3 改变 scrollTop 值
				// f.3.1 scrollTop 值改成 0 之外的值 比如说 1
				this.scrollTop = 1;
				// f.3.2 在 $nextTick回调函数中，将值 重新改为 0
				this.$nextTick(function(){
					this.scrollTop=0
				})
			},
			// 滚动到底部触发事件
			handleLower(){
				// 触底自动加载下一个分类
				const length = this.categories.length;
				 this.select_index = (this.select_index + 1) % length;// 自动切换到下个分类,除以长度取余是为了最后一个触底返回第一个
				this.changeIndex(this.select_index);
			}
		}
	}
</script>

<style lang="scss">
	.yg-cat {
		.yg-cat-content {
			display: flex;

			.cat-content-left {
				flex: 1;
				background-color: #f3f3f3;
				height: calc(100vh - 100rpx);

				.content-left-item {
					line-height: 60rpx;
					text-align: center;
				}

				.active {
					color: red;
				}
			}

			.cat-content-right {
				flex: 3;
				height: calc(100vh - 100rpx);
				.right-item-head{
					line-height: 60rpx;
					text-align: center;
				}
				.right-item-body{
					display: flex;
					flex-wrap: wrap;
					.item-body-i{
					 width: 33.33%;
					 display: flex;
					 flex-direction: column;
					 justify-content: center;
					 align-items: center;
					 margin-top: 20rpx;
					  image{
						  width: 120rpx;
						  height: 120rpx;
					  }
					  .text{
						  font-size: 20rpx;
					  }
					}
				}
			}
		}
	}
</style>
